<template>
  <!--<div class="app-container home">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="24">
          <blockquote class="text-warning" style="font-size: 12px">
            领取阿里云通用云产品1888优惠券
            <br />
            <el-link
              href="https://www.aliyun.com/minisite/goods?userCode=brki8iof"
              type="primary"
              target="_blank"
              >https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link
            >
            <br />
            领取腾讯云通用云产品2860优惠券
            <br />
            <el-link
              href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"
              type="primary"
              target="_blank"
              >https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link
            >
            <br />
            阿里云服务器折扣区
            <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank"
              >>☛☛点我进入☚☚</el-link
            >
            &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区
            <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank"
              >>☛☛点我进入☚☚</el-link
            ><br />
            <h4 class="text-danger">
              云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)
            </h4>
          </blockquote>

          <hr />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
          <h2>SunMa后台管理框架</h2>
          <p>
            一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
          </p>
          <p>
            <b>当前版本:</b> <span>v{{ version }}</span>
          </p>
          <p>
            <el-tag type="danger">&yen;免费开源</el-tag>
          </p>
          <p>
            <el-button
              type="primary"
              icon="Cloudy"
              plain
              @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
              >访问码云</el-button
            >
            <el-button
              icon="HomeFilled"
              plain
              @click="goTarget('http://ruoyi.vip')"
              >访问主页</el-button
            >
          </p>
        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
          <el-row>
            <el-col :span="12">
              <h2>技术选型</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <h4>后端技术</h4>
              <ul>
                <li>SpringBoot</li>
                <li>Spring Security</li>
                <li>JWT</li>
                <li>MyBatis</li>
                <li>Druid</li>
                <li>Fastjson</li>
                <li>...</li>
              </ul>
            </el-col>
            <el-col :span="6">
              <h4>前端技术</h4>
              <ul>
                <li>Vue</li>
                <li>Vuex</li>
                <li>Element-ui</li>
                <li>Axios</li>
                <li>Sass</li>
                <li>Quill</li>
                <li>...</li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="update-log">
            <template v-slot:header>
              <div class="clearfix">
                <span>联系信息</span>
              </div>
            </template>
            <div class="body">
              <p>
                <p>
                  <i class="el-icon-s-promotion"></i>
                  邮箱：<ElLink :href="emailLink" target="_blank">{{ email }}</ElLink>
                </p>
              </p>
              <p>

              </p>
              <p>

              </p>
              <p>

              </p>
            </div>
          </el-card>
        </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="update-log">
            <template v-slot:header>
              <div class="clearfix">
                <span>更新日志</span>
              </div>
            </template>
            <el-collapse accordion>

            </el-collapse>
          </el-card>
        </el-col>
       &lt;!&ndash;  <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="update-log">
            <template v-slot:header>
              <div class="clearfix">
                <span>捐赠支持</span>
              </div>
            </template>
            <div class="body">
              <img
                src="@/assets/images/pay.png"
                alt="donate"
                style="width:100%"
              />
              <span style="display: inline-block; height: 30px; line-height: 30px"
                >你可以请作者喝杯咖啡表示鼓励</span
              >
            </div>
          </el-card>
        </el-col>&ndash;&gt;
      </el-row>
    </div>-->
  <div class="my-container">
    <div class="app-container" style="width: 63%;">

    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
      <el-table-column label="公告标题" width="420px" align="left" prop="noticeTitle" :show-overflow-tooltip="true">

      </el-table-column>

      <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
        <template #default="scope">
          <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
        </template>
      </el-table-column>

      <el-table-column label="发布时间" align="center" prop="createTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="MoreFilled" @click="handleKanKan(scope.row.noticeId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    </div>

    <div style="width: 27%;margin-top: 20px;margin-left: 5%">
    <el-row style="width: 280%;">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" >
          <el-card class="update-log" style="height: 210px">
            <template v-slot:header >
              <div class="clearfix">
                <span>联系信息</span>
              </div>
            </template>
            <div class="body">
              <p>
                <p>
                  <i class="el-icon-s-promotion"></i>
                  邮箱：<ElLink :href="emailLink" target="_blank">{{ email }}</ElLink>
                  <br/>
                  QQ ：1240571262
                </p>
              </p>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row style="width: 280%; margin-top: 10px">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" >
          <el-card class="update-log" style="height: 210px">
            <h3>SunMa后台管理系统</h3>
            <p style="font-size: 14px;text-align: left">
              SunMa管理系统，是基于SpringBoot+Vue3+Element-Plus+Vite构建的固定资产管理系统。
            </p>
          </el-card>
        </el-col>

      </el-row>
      <el-row>
      <el-col :sm="24" :lg="12" style="padding-left: 20px">

      </el-col></el-row>
    </div>


    <!--通知公告详情 -->

<!--    <el-dialog :title="form.noticeTitle" center  v-model="openDetail" width="680px" height="240px" icon="Star" append-to-body>
      <div style="margin-top:-20px;margin-bottom:10px;">
        <el-tag size="mini" effect="dark" type="success" v-if="form.noticeType==2">公告</el-tag>
        <el-tag size="mini" effect="dark" type="warning" v-else>通知</el-tag>
        <span style="margin-left:20px; font-size: small">{{form.createTime}}</span>
      </div>
      <div v-loading="loadingDetail" style="border: 1px solid silver; overflow: hidden;">
        <div v-html="form.noticeContent" style="margin:2px;height: 500px; position: relative" class="ql-editor">

        </div>
      </div>
      <div slot="footer" style="margin-top: 10px;text-align: center">
        <el-button type="primary" @click="closeDetail" f> 关 闭 </el-button>
      </div>
    </el-dialog>-->
    <el-dialog
        v-model="openDetail"
        :width="dialogWidth"
        class="custom-dialog"
        :top="dialogTop"
        center
    >
      <template #title>
        <div style="display: flex; justify-content: space-between;">
        <span style="margin-left: 40%">{{ form.noticeTitle }}</span>
        <el-tag
            style="cursor: pointer;margin-right: 5px"

            type="default"
            size="mini"
            @click="toggleMaximize"
        >{{ maximizeButtonText }}</el-tag></div>
      </template>
      <!-- Your dialog content here -->
      <div style="margin-top:-20px;margin-bottom:10px;">
        <el-tag size="mini" effect="dark" type="success" v-if="form.noticeType==2">公告</el-tag>
        <el-tag size="mini" effect="dark" type="warning" v-else>通知</el-tag>
        <span style="margin-left:20px; font-size: small">{{form.createTime}}</span>
      </div>
      <div v-loading="loadingDetail" style="border: 1px solid silver; overflow: hidden;">
        <div v-html="form.noticeContent" style="margin-left: 1px; margin-right: 2px;
        height: 71vh; position: relative" class="ql-editor">
        </div>
      </div>
      <div slot="footer" style="margin-top: 10px;text-align: center">
        <el-button type="primary" @click="closeDetail" f> 关 闭 </el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script setup name="Index">
import { ref } from 'vue'

//=============
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
const email = ref('1240571262@qq.com');
const emailLink = ref(`mailto:${email.value}`);



const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");

const noticeList = ref([]);
const open = ref(false);

const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const openDetail=ref(false);
const loadingDetail=ref(false);
const titleDetail=ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    noticeTitle: undefined,
    createBy: undefined,
    status: undefined
  },
  rules: {
    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
  },
});

const { queryParams, form, rules } = toRefs(data);

//=============

const dialogMaximized = ref(false);

const dialogWidth = ref('50%');

const dialogTop = ref('15vh');
const maximizeButtonText = ref('展开');

const toggleMaximize = () => {
  dialogMaximized.value = !dialogMaximized.value;
  if (dialogMaximized.value) {
    dialogWidth.value = '78%';
    dialogTop.value = '0';
    maximizeButtonText.value = '收缩';
  } else {
    dialogWidth.value = '38%';
    dialogTop.value = '15vh';
    maximizeButtonText.value = '展开';
  }
};



/** 查询公告列表 */
function getList() {
  loading.value = true;
  listNotice(queryParams.value).then(response => {
    noticeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    noticeId: undefined,
    noticeTitle: undefined,
    noticeType: undefined,
    noticeContent: undefined,
    status: "0"
  };
  proxy.resetForm("noticeRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.noticeId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加公告";
}
/**修改按钮操作 */
function handleUpdate(row) {
  reset();
  const noticeId = row.noticeId || ids.value;
  getNotice(noticeId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改公告";
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["noticeRef"].validate(valid => {
    if (valid) {
      if (form.value.noticeId != undefined) {
        updateNotice(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addNotice(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const noticeIds = row.noticeId || ids.value
  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
    return delNotice(noticeIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function goTarget(url) {
  window.open(url, '__blank')
}
//========================
function handleKanKan(id) {
  openDetail.value = true;
  loadingDetail.value = true;
  getNotice(id).then(response => {
    form.value = response.data;
    loadingDetail.value = false;
  });
}
// 取消按钮
function closeDetail() {
  titleDetail.value = "详情";
  openDetail.value = false;
  reset();
}
getList();
</script>



<style scoped lang="scss">
/*  dialog*/
/*::v-deep .el-dialog {
  margin-top: 0vh !important;
}
::v-deep .el-dialog__header {
  padding: 15px 20px 15px;
}
::v-deep .el-dialog__headerbtn{
  top: 15px;
}

!*dialog header*!
::v-deep .el-dialog__header{
  background: #e3eaed;
}
::v-deep .avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
::v-deep .el-dialog__title {
  color: rgba(0,0,0,.85);
  font-weight: 500;
  word-wrap: break-word;
}
!*全屏缩放图标样式*!
::v-deep .avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
::v-deep .avue-crud__dialog__menu i {
  color: #909399;
  font-size: 15px;
}
::v-deep .el-icon-full-screen{
  cursor: pointer;
}
::v-deep .el-icon-full-screen:before {
  content: "\e719";
}

//头部固定
::v-deep .adTextDetailDialogClass .el-dialog__body{
  max-height: calc(100vh - 150px);
  overflow: auto;
  border-top:1px solid #dfdfdf;
  border-bottom:1px solid #dfdfdf;
}
::v-deep .adTextDetailDialogClass .el-dialog{
  position: fixed;
  height:fit-content;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  margin:auto !important;
}*/
.custom-dialog .el-dialog__body {
  height: calc(100vh - 15vh ); /* 减去头部和底部的默认高度 */
  overflow-y: auto;
}
.el-dialog__body {
  height: calc(100vh - 15vh ); /* 减去头部和底部的默认高度 */
  overflow-y: auto;
}
.el-dialog {
  height: calc(100vh - 15vh ); /* 减去头部和底部的默认高度 */
  overflow-y: auto;
}
.my-container {
  display: flex;
}
::v-deep .el-table_1_column_1.el-table__cell.is-leaf.is-left {
  text-align: center ;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {

    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

